$(function () {
    $('.dong_left').click(function () {
        var le = $('.dong_dong ul').position();
        if (le.left < 0) {
            $('.dong_dong ul').stop().animate({
                left: '0'
            }, 600)
        } else {
            $('.dong_dong ul').stop().animate({
                left: '-100%'
            }, 600)
        }
    })
    // ----------------------------------------------
    $('.dong_right').click(function () {
        var le = $('.dong_dong ul').position();
        console.log(le.left);
        if (le.left !== 0) {
            $('.dong_dong ul').stop().animate({
                left: '0'
            }, 600)
        } else {
            $('.dong_dong ul').stop().animate({
                left: '-100%'
            }, 600)
        }
    })
})
// 热销促销
$(function () {
    $('.wu_ge_top ul li').mouseover(function () {
        var ind = $(this).index();
        $(this).css('color', '#f43434').siblings().css('color', '#555');
        $('.wu_ge_bottom ul').eq(ind).fadeIn(400).siblings().fadeOut(400)
    })
    // -----------------------------------------------------------------------
});
// 重新渲染==========================================热销榜
var Rx = document.querySelectorAll('.rexiao');
var Hz = document.querySelector('.heziul');
var kong = '';
var rexiao = data.shoesData.slice(0,5);
for (let i = 0; i < rexiao.length; i++) {
    kong += `
<li>
<div style="margin-left: 20px;">
<a href="goods.html?shopName=shoesData#${data.shoesData[i].goodsid}"><img src="${data.shoesData[i].goodsurls.nowurl}" alt="" style="width: 199px; height: 199px;"></a>
</div>
<div style="width: 150px; margin-left: 50px;"><a href="" style="font-size: 12px;">${data.shoesData[i].goodstitle}</a></div>
<div style="margin-left: 50px;">${data.shoesData[i].goodsprice}</div>
</li>
`
};
Hz.innerHTML = kong;
// ====================================================热销榜渲染
var Cx = document.querySelector('.cuxiao');
var Hztwo = document.querySelector('.hezi2');
console.log(Cx);
Cx.onmouseover = function () {
    Hztwo.style.display = 'block';
};
Cx.onmouseout = function () {
    Hztwo.style.display = 'none';
};


// 图群
// =========================================今日推荐重新渲染
var Tu = document.querySelector('.tjhezi');
var jrtj = data.shoesData.slice(1,11);
var Wu = '';
for (let i = 0; i < jrtj.length; i++) {
    Wu += `
    <li>
    <a href="goods.html?shopName=shoesData#${data.shoesData[i].goodsid}"><img src="${data.shoesData[i].goodsurls.nowurl}" alt="" style="width: 199px; height: 199px;"></a>
    <p>${data.shoesData[i].goodstitle}</p>
    <span style="color: red; font-size: 14px;">&yen;${data.shoesData[i].goodsprice}</span>
</li>
    `
}
Tu.innerHTML = Wu;
// ===================================================新品到货重新渲染
var Tut = document.querySelector('.tjhezi1');
var xpdh = data.shoesData.slice(4,16);
var Wuw = '';
for (let i = 0; i < xpdh.length; i++) {
    Wuw += `
    <li>
    <a href="goods.html?shopName=shoesData#${data.shoesData[i].goodsid}"><img src="${data.shoesData[i].goodsurls.nowurl}" alt="" style="width: 199px; height: 199px;"></a>
    <p>${data.shoesData[i].goodstitle}</p>
    <span style="color: red; font-size: 14px;">&yen;${data.shoesData[i].goodsprice}</span>
</li>
    `
}
Tut.innerHTML = Wuw;
// =================================================楼层导航
// 楼层导航
let arr = [];
$('.content').each(function (index, item) {
    arr.push($(item).offset().top)
})

console.log(arr);

//  绑定滚动事件
$(window).on('scroll', function () {
    // 获取滚动值
    let sctop = $(window).scrollTop();
    console.log(sctop);

    //  判断头部内容出现
    if (sctop >= 900) {
        $('.header').css({ top: 0 })
        $('.navbar').css({ width: 36, height: 227 })
    } else {
        $('.header').css({ top: -150 })
        $('.navbar').css({ width: 0, height: 0 })
    }


    //  判断 进入视野区域的元素对应的索引值
    arr.forEach((item, index) => {
        if (item - sctop <= 200 && item >= sctop) {
            $('.list li').eq(index).addClass('active').siblings().removeClass('active')
        }
    })
})

// 底部轮播
// 底部轮播
var _index5 = 0;
$("#four_flash .but_right img").click(function () {
    _index5++;
    var len = $(".flashBg ul.mobile li").length;
    if (_index5 + 5 > len) {
        $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
    }
    $("#four_flash .flashBg ul.mobile").stop().animate({
        left: -_index5 * 326
    }, 1000);
});


$("#four_flash .but_left img").click(function () {
    if (_index5 == 0) {
        $("ul.mobile").prepend($("ul.mobile").html());
        $("ul.mobile").css("left", "-1380px");
        _index5 = 6
    }
    _index5--;
    $("#four_flash .flashBg ul.mobile").stop().animate({
        left: -_index5 * 326
    }, 1000);
});
